<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/daohang.css">
    <link rel="stylesheet" href="./css/campus.css">
    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"  ><a href="./campus.html"><span id="current">校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>
                
               <li id="app"><a href="./APP.html"><span>APP</span></a></li>
               <li id="news"><a href="./zixun.html"><span id="now">资讯</span></a></li>
               <li id="find"><a href=""><span>发现</span></a></li>
       
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>

            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <!-- 导航栏下面的背景图 -->
    <div class="top-banner">
        <div class="img">
        </div>
    </div>

    <!-- 设置下面的搜索部分 -->
    <div class="search-box">
        <div class="search-box-all">
            <!-- 上面的找全职  找实习 -->
            <div class="school-typebox">
                <a href="#">
                    <div class="typebox-full">

                    </div>
                </a>
                <a href="#">
                    <div class="typebox-intern">

                    </div>
                </a>
            </div>
            <div class="search-form ">
                <span class="shanghai">上海</span>
                <!-- <span class="inp"> -->
                <input type="text" placeholder="搜索职位、公司">
                <!-- </span> -->
                <span class="search-form-search">搜索</span>
            </div>

        </div>
    </div>
    <!-- 设置核心内容 -->

    <div id="home-box">
        <!-- 轮播图及其左边部分 -->
        <div class="main-screen">
            <!-- 左边部分 -->
            <div class="left">

                <!-- 左侧职位选择 -->
                <div class="left-job-menu">
                    <dl>
                        <dd>
                            <b>互联网技术 / 运营 / 产品</b>
                        </dd>
                    </dl>
                    <dl>
                        <dd>
                            <b>设计 / 销售 / 房地产</b>
                        </dd>
                    </dl>
                    <dl>
                        <dd>
                            <b>人力 / 法律</b>
                        </dd>
                    </dl>
                </div>
                <!-- 左侧学生活动 -->
                <div class="left-student-active">
                    <div class="title">学生活动</div>
                    <ul>
                        <li>
                            <a href="#">·2021秋招季-青年职上校招节</a>
                        </li>
                        <li>
                            <a href="">·2021年大中城市联合招聘</a>
                        </li>
                        <li>
                            <a href="">·金秋招聘月·2021活动分会场</a>
                        </li>
                        <li>
                            <a href="">·24365校园招聘服务</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 右侧轮播图部分 -->
            <div class="right  swiper-container">
                <div class="content">
                    <div class="pic">

                        <!-- a*5>img[src=./img/$.jpg] -->
                        <a href="" class="current"><img src="./img/campus/轮播1.jpg" alt=""></a>
                        <a href=""><img src="./img/campus/轮播2.jpg" alt=""></a>
                        <a href=""><img src="./img/campus/轮播3.jpg" alt=""></a>
                        <a href=""><img src="./img/campus/轮播4.jpg" alt=""></a>
                    </div>
                    <div class="content-indicator">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                    </div>
                    <div class="content-page">
                        <span class="prev">&lt;</span>
                        <span class="next">&gt;</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- 校招直播部分 -->
        <div class="shcool-zhibo">
            <h3 class="section-title">校招直播</h3>
            <div class="swiper-zhibo  zhibo-sliderbox">
                <!-- 左边点击箭头   剪头部分用背景图（雪碧图）  切换-->
                <div id="btnLeft" class="arrow-btn dasable"></div>
                <div class="swiper-zhibo-slider">
                    <ul>
                        <li data-index='0'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/11.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    睿魔智能OBSBOT线上校招
                                </div>
                                <div class="zhibo-line-text">
                                    硬件实习生等12个岗位
                                </div>
                            </div>
                        </li>
                        <li data-index='1'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/22.png" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    链家总部线上直播宣讲
                                </div>
                                <div class="zhibo-line-text">
                                    链家新生代 销售精英等5
                                </div>
                            </div>
                        </li>
                        <li data-index='2'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    吉因加2022届校招【管培生专场】
                                </div>
                                <div class="zhibo-line-text">
                                    营销商务管培生等34个岗位

                                </div>
                            </div>
                        </li>
                        <li data-index='3'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    英科再生线上招聘
                                </div>
                                <div class="zhibo-line-text">
                                    生产管理培训生等17个岗位
                                </div>
                            </div>
                        </li>
                        <li data-index='4'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    英科再生线上招聘
                                </div>
                                <div class="zhibo-line-text">
                                    生产管理培训生等17个岗位
                                </div>
                            </div>
                        </li>
                        <li data-index='5'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/44.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    百融云创2022校园招聘
                                </div>
                                <div class="zhibo-line-text">
                                    测试工程师 (MJ000560)等47
                                </div>
                            </div>
                        </li>
                        <li data-index='6'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    英科再生线上招聘
                                </div>
                                <div class="zhibo-line-text">
                                    生产管理培训生等17个岗位
                                </div>
                            </div>
                        </li>
                        <li data-index='7'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    英科再生线上招聘
                                </div>
                                <div class="zhibo-line-text">
                                    生产管理培训生等17个岗位
                                </div>
                            </div>
                        </li>
                        <li data-index='8'>
                            <div class="img-wrap">
                                <span class="label">回放</span>
                                <img src="./img/campus/33.jpg" alt="">
                                <div class="layer">
                                </div>
                                <div class="hover-code">
                                    <span>微信扫码观看</span>
                                    <img src="./img/campus/1.png" alt="">

                                </div>
                            </div>
                            <div class="zhibo-content">
                                <div class="zhibo-line-title">
                                    英科再生线上招聘
                                </div>
                                <div class="zhibo-line-text">
                                    生产管理培训生等17个岗位
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 右边点击箭头 -->
                <div id="btnRight" class="arrow-btn dasable"></div>
            </div>
        </div>


        <!-- 热门公司部分 -->
        <div class="hot-pos-buried   " id="field-trip">
            <div class="box-title">
                <b>热门公司</b>
            </div>
            <h3 class="pisition-type">
                <span id="cur">北京</span>
                <span>上海</span>
                <span>深圳</span>
                <span>杭州</span>
                <span>广州</span>
                <span>成都</span>
                <span>沈阳</span>
                <span>南京</span>
                <span>武汉</span>
                <span>西安</span>
            </h3>
            <!-- js 渲染上去的 -->
            <div class="position-list">
                <ul class="position-list-hotcompany" id="three-hotCompany">
                    <li>
                        <div class="sub-li">
                            <!-- li  里上边部分 -->
                            <div class="company-info">
                                <div class="img-box">
                                    <img src="https://img.bosszhipin.com/beijin/mcs/bar/20200430/4204e9c9f200b00b77fb59d093acd281be1bd4a3bd2a63f070bdbdada9aad826.jpg"
                                        alt="">
                                </div>
                                <div class="company-text">
                                    <h4>腾讯</h4>
                                    <span>不需要融资</span>
                                    <span class="vline"></span>
                                    <span>互联网</span>
                                </div>
                            </div>
                            <!-- li  里下边部分 -->

                            <div class="company-info-bot">
                                <p><span class="text-blue">9736</span>个热招职位</p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>

        </div>


        <!-- 热门校招部分 -->
        <div class="hot-pos-buried   " id="field-trip">
            <div class="box-title">
                <b>热门校招</b>
            </div>
            <h3 class="pisition-type">
                <span id="cur">全职</span>
                <span>实习</span>
            </h3>
            <!-- js 渲染上去的 -->
            <div class="position-list">
                <ul id="two-position-list">

                </ul>
            </div>
            <div class="job-more">
                <a href="./job.html"> 查看更多</a>
            </div>
        </div>


        <!-- 求职攻略 -->
        <div class="school-job-strategy">
            <h3 class="section-title">
                求职攻略
            </h3>
            <div class="swiper-strategy">
                <div class="strategy-zhibo">
                    <!-- 左边点击箭头   剪头部分用背景图（雪碧图）  切换-->
                    <div id="btnLeft1" class="arrow-btn1 dasable"></div>
                    <div class="strategy-swiper-container">
                        <ul class="strategy-swiper-wrapper" id="strategy-swiper-wrapper">
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/a35d875c246e13a30baea64e1a7600c026b1843edb5867970fca7c28c0d4ecaec6eeee71f3274248861ad84e54330017.png"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/027569a9ddcbc345545e1b163869a92f26b1843edb5867970fca7c28c0d4ecae5eed1c76c878402da89f08f15ecee4b2.png" alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/d8cf93d01d5c431322811b9f463b274926b1843edb5867970fca7c28c0d4ecae87d207d7a1364f9c84cdaa89e656d70e.png" alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                   <img  src="https://img.bosszhipin.com/beijin/cms/9cca24d58d79a0b3942f54e02847cb96.jpeg">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/db4570653f196824d695345bb9bf2f8026b1843edb5867970fca7c28c0d4ecae4e8506f29ae746fda2c9960b827b5a02.png" alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        作业帮后端一面、二面经验
                                    </div>
                                    <div class="content-text">
                                        作业帮一面：自我介绍项目java的面对对象特点并举例说明问我LInkedList知道不？你说一下他的底层，妞儿的list                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/e05be79e3344d6cd64b57f396f6dccb726b1843edb5867970fca7c28c0d4ecae8d9e5797e1204b90b7548c03e101879f.png"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        最新 JVM 面试高频题汇总
                                    </div>
                                    <div class="content-text">
                                        JVM面试题Java类加载过程？描述一下JVM加载Class文件的原理机制?Java内存分配。GC是什么?为什么要有GC                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/f79ba98ccd8858db5d2f78352ab1d0c3.jpeg"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        SpringBoot 系列之集成 Dubbo 示例教程
                                    </div>
                                    <div class="content-text">
                                        分布式基本理论分布式基本定义《分布式系统原理与范型》定义：“分布式系统是若干独立计算机的集合，这些计算机对于用户来说就像                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/d8b3cda7d0cbf1687a04f585648c536f.jpeg"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        面试题：如何实现丝滑般的数据库扩容
                                    </div>
                                    <div class="content-text">
                                        引言初版如果我们的线上服务不重要，一般来个单体的数据库DB来存储数据即可来。单体应用优点：简单，省事，方便。缺点：数据并                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/a35d875c246e13a30baea64e1a7600c026b1843edb5867970fca7c28c0d4ecaec6eeee71f3274248861ad84e54330017.png"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                            <li>
                                <div class="wrapper-img">
                                    <img src="https://img.bosszhipin.com/beijin/cms/a35d875c246e13a30baea64e1a7600c026b1843edb5867970fca7c28c0d4ecaec6eeee71f3274248861ad84e54330017.png"
                                        alt="">
                                </div>
                                <div class="wrapper-content">
                                    <div class="content-title">
                                        一年经验腾讯二面之旅
                                    </div>
                                    <div class="content-text">
                                        腾讯面试提前1天和提前一个小时都会发短信提示。去的腾讯滨海大厦面试，大楼的现代化程度很高，不过需要提醒一下的是，腾讯的滨 </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 放置左右两边的剪头 -->
                    <!-- 右边点击箭头 -->
                    <div id="btnRight1" class="arrow-btn1 dasable"></div>
                </div>
            </div>
        </div>

        <div class="school-mask">
            <p>上线视频面试，避免疫情感染</p>
            <ul>
                <li>随时随地在线沟通，语音视频面试更安全</li>
                <li>随时随地可面试，在哪都能聊工作</li>
                <li>远程面试防止疫情感染</li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>
                    
                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日  8:00 - 22:00</li>
                    <li>休息日  9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt=""> 电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt=""> 京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
    <script>

        $('.swiper-zhibo>ul li').hover(() => {
            $('.hover-code').show()
            $('.img-wrap .hover-code').css("background-color", "rgba(0, 0, 0, 0.5)")

        }, () => {
            $('.hover-code').hide()

        })
        let index = 0;
        let time = setInterval(nextImg, 500);
        $('.next').click(() => {
            nextImg();
        })
        function nextImg() {
            index = index >= $('.pic a').length - 1 ? 0 : ++index;
            showImg();
        }

        // 上一页的点击事件
        $('.prev').click(() => {
            index = index <= 0 ? $('.pic a').length - 1 : (index - 1);
            showImg();
        })
        const showImg = () => {
            $('.pic a').eq(index).show().siblings().hide();
            $('.content-indicator span')
                .eq(index)
                .addClass('active')
                .siblings()
                .removeClass('active');
        }

        $('.content span').hover(() => {
            // 监听鼠标移入
            clearInterval(time);
        }, () => {
            // 监听鼠标移出
            time = setInterval(nextImg, 500);
        })
        $('content-indicator>span').hover(function () {
            index = $(this).index()
            showImg()
        })



        // ---------------------------轮播图下面的左右切换-轮播图---------------------------------
        NameShow1();
        function NameShow1() {

            $('.swiper-zhibo-slider>ul li').click(function () {

            })

            // 记录当前被点击的次数
            let sliderCount = 0

            // 获取图片的个数
            const imgCount = $('.swiper-zhibo-slider>ul li').length
            // 下一张切换
            $('#btnRight').click(function () {
                // 点到最好一张都时候就不能继续点击了
                if (sliderCount >= imgCount - 5) {
                    return false
                }

                sliderCount++
                $('.swiper-zhibo-slider>ul ').animate({
                    // left: '-=' + $('.swiper-zhibo-slider>ul li').width()
                    left: '-=' + "296px"
                }, 300)
                checkState();
            })

            // 往上一张切换
            $('#btnLeft').click(function () {
                if (sliderCount <= 0) {
                    return false
                }
                sliderCount--
                $('ul').animate({
                    // left: '+=' + $('.swiper-zhibo-slider>ul li').width()
                    left: '+=' + "296px"
                }, 300)
                checkState();
            })

            //  用来检测每次点击后处于什么状态
            function checkState() {
                console.log(sliderCount);
                console.log(imgCount);
                console.log(imgCount - 5);
                console.log('*******');
                //  10张图片显示5张   只能点击5次
                //  判断当前是最后一张
                if (sliderCount >= imgCount - 5) {
                    alert('最后一张');
                    $('btnRight').addClass('dasable')
                }
                // 判断当前是第一张
                else if (sliderCount <= 0) {
                    $('#btnLeft').addClass('dasable')
                    // alert('处于第一张部分');
                }
                // 判断处于中间的时候
                else {
                    // alert('处于中间状态');
                    $('#btnRight').removeClass('dasable')
                    $('#btnLeft').removeClass('dasable')
                }
            }
        }

        /*--------------------------------渲染热门公司部分------------------------------------------------*/
        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getHotCompany',
                dataType: 'json'
            }).done((data) => {
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    str += `          
                    <li>
                    <div class="sub-li">
                        <div class="company-info">
                            <div class="img-box">
                                <img src="${value.src}"
                                    alt="">
                            </div>
                            <div class="company-text">
                                <h4>${value.companyName}</h4>
                                <span>${value.level}</span>
                                <span class="vline"></span>
                                <span>${value.trade}</span>
                            </div>
                        </div>
                        <div class="company-info-bot">
                            <p><span class="text-blue">${value.count}</span>个热招职位</p>
                        </div>
                    </div>
                </li>
                    `
                })
                $('#three-hotCompany').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })

        /*-------------------------渲染实习 岗位部分-----------------------------------*/
        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getFieldTrip',
                dataType: 'json'
            }).done((data) => {
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {

                    str += `          
                    <li>
                            <div class="sub-li">
                                <div class="job-info">
                                    <div class="job-info-top">

                                        <span class="job-name">${value.jobName}
                                        </span>
                                        <span class="salary">${value.money}</span>
                                    </div>
                                    <div class="job-info-bot">
                                        <span>${value.city}</span>
                                        <span class="vline"></span>
                                        <span>${value.jobTime}</span>
                                        <span class="vline"></span>
                                        <span>${value.shoolLevel}</span>
                                    </div>
                                </div>

                                <div class="sub-li-bottom">
                                    <div class="img">
                                        <img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200721/3ab1833f4fe9749bbf8d41b087c8c74125404ffb065b2e1b8a04f9f3410965bb.png"
                                            alt="">
                                    </div>
                                    <div class="company-info">
                                        <span class="name">${value.companyName}</span>
                                        <span class="type">${value.trade}</span>
                                        <span class="vline vline1"></span>
                                        <span class="level">${value.level}</span>
                                    </div>
                                </div>
                            </div>
                    </li>
                    `
                })
                $('#two-position-list').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })



        /*******0-----下面的最后一个轮播图部分设置-----------------*************/
        NameShow2() ;
        function NameShow2() {

            // 记录当前被点击的次数
            let sliderCount1 = 0

            // 获取图片的个数
            const imgCount1 = $('#strategy-swiper-wrapper>li').length
            console.log(imgCount1 );
            // 下一张切换
            $('#btnRight1').click(function () {
                console.log(1111);
                // 点到最好一张都时候就不能继续点击了
                if (sliderCount1 >= imgCount1 - 4) {
                    return false
                    console.log(333);
               
                }

                sliderCount1++
                $('#strategy-swiper-wrapper').animate({
                    // left: '-=' + $('#strategy-swiper-wrapper li').width()
                    // left:'-='+"1230px"
                    left:'-='+"305px"
                }, 300)
                checkState();
            })

            // 往上一张切换
            $('#btnLeft1').click(function () {
                console.log("LLLLLLL");
                if (sliderCount1 <= 0) {
                    return false
                }
                sliderCount1--
                $('#strategy-swiper-wrapper ').animate({
                    // left: '+=' + $('#strategy-swiper-wrapper li').width()
                    left:'+='+"305px"
                }, 300)
                checkState();
            })

            //  用来检测每次点击后处于什么状态
            function checkState() {
                console.log(sliderCount1);
                console.log(imgCount1);
                console.log(imgCount1 - 4);
                console.log('*******');
                //  10张图片显示5张   只能点击5次
                //  判断当前是最后一张
                if (sliderCount1 >= imgCount1 - 5) {
                    alert('最后一张');
                    $('btnRight1').addClass('dasable')
                }
                // 判断当前是第一张
                else if (sliderCount1 <= 0) {
                    $('#btnLeft1').addClass('dasable')
                    // alert('处于第一张部分');
                }
                // 判断处于中间的时候
                else {
                    // alert('处于中间状态');
                    $('#btnRight1').removeClass('dasable')
                    $('#btnLeft1').removeClass('dasable')
                }
            }

        }

        $('.swiper-zhibo-slider ul li').hover(function () {
            // $(this).attr("data-index")
            console.log($(this).attr("data-index"));
            $(" .hover-code").eq($(this).attr("data-index")).show()
        },function () {
            $(" .hover-code").eq($(this).attr("data-index")).hide()
        })
      
    </script>
</body>

</html>